<template>
    <div class="selector">
    <el-select v-model="value" placeholder="请选择产线" class="s">
      <el-option 
      v-for="item in options" 
      :key="item.value" 
      :label="item.label" 
      :value="item.value"
      />
    </el-select>

    <el-text class="t" type="primary">统计时间从xx/xx/xx至今日</el-text>

    <el-button
    class="check"
    type="primary"
    @click="queryData"
  >
    查询
  </el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import emitter from '../../plugins/Bus';
import { ElMessage } from 'element-plus'

const value = ref('')
const options = [
    {
        value: '产线1',
        label: '产线1',
    },

    {
        value: '产线2',
        label: '产线2',
    }
]

const queryData = () => {
    emitter.emit('line-selected', value.value)
    if(value.value != ''){
        ElMessage({
        message: '查询成功消息提示',
        type: 'success',
        })
    }
}
</script>

<style>
.selector{
    width: 1370px;
    height: 150px;
    margin-left:-20px;
    margin-top: -20px;
    background-color: aliceblue;
}
.t{
    width: 200px;
    margin-left: 260px;
    margin-top: 100px;
}
.s{
    width: 200px;
    margin-left: 150px;
    margin-top: 50px;
}
.check{
    width: 100px;
    margin-left: 300px;
    margin-top: 50px;
}
</style>